<!-- 图片预览器 -->
<template>
	<view class="img-viewer-mask" v-if="myShow" @click="handleClose">
		<view class="img-viewer-img" :style="'background-image:url('+url+')'"></view>
	</view>
</template>
<script>
	export default {
		props: {
			url: {
				type: String,
				default: ''
			},
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				myShow: false,
			}
		},
		onLoad(e) {},
		onShow() {},
		methods: {
			// 关闭弹窗
			handleClose() {
				this.$emit('close', false);
			},
		},
		watch: {
			show(nvl, ovl) {
				this.myShow = nvl;
				console.log('this.myShow', this.myShow);
			}
		},
	}
</script>
<style lang="scss" scoped>
	// 引入sass样式变量(本来想全局引入，但是不成功，以后有空再解决)
	@import '@/static/scss/variables.scss';

	.img-viewer-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img-viewer-img {
		width: 100vw;
		height: 80vh;
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
	}
</style>
<style lang="scss">
</style>